<template>
	<view class="content">
		<!-- 空列表 -->

		<view v-if="empty == 'isempty'" class="empty">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>

		<u-calendar :mode="'range'" :monthNum="24" :minDate="lastYeardate" :maxDate="nextYeardate" :show="showdate"
			@close="closedate" @confirm="confirmdate" startText="选择开始" endText="选择结束" confirmDisabledText="请选择查询审批时间段"
			:formatter="formatter" />


		<view class="search">
			<u-search class="left" placeholder="请输入关键词" @change="selectparams" @clear="clearkeyword"
				:bgColor="searchstyle" :borderColor="borderstyle" :showAction="false" v-model="keyword"></u-search>
			<view class="backtop">
				<u-button type="primary" @click="topback" class="custom-style" :plain="true" size="mini"
					text="刷新"></u-button>

			</view>

		</view>

    <u-sticky offset-top="105">
			<view class="btngroup">
				<view class="datebtn">
					<u-tag :text="'日期筛选'" @click="selectdate" plain="true" size="mini" type="info" />

				</view>
				<view class="storebtn">
					<u-tag :text="'门店筛选'" @click="shaixuan" plain="true" size="mini" type="primary" />

				</view>
			</view>

		</u-sticky>


		<u-sticky offset-top="105">
			<view class="btngroup">
				<view class="datebtn">
					<u-tag :text="'日期筛选'" @click="selectdate" plain="true" size="mini" type="info" />

				</view>

			</view>

		</u-sticky>

		<view class="data">
			<view class="data-content" v-for="item in recordlist" :key="item.id">
				<view @click="toinfo(item.id)">
					<view class="title">
						{{ item.nickname }}<span class="typeStyle"></span>
					</view>

					<view class="math">￥{{ item.money }} </view>
					<view class="time">
						{{ item.createtime | dateFormat}}
					</view>
				</view>
			</view>
		</view>

		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.auth = this.$u.auth.check();

			this.EmpTichengRecord(); //提现记录
		},
		created() {
			setInterval(() => {
				this.$u.count.check();
			}, 15000);
		},

		onShow() {
			const currentDate = new Date();
			const currentYear = currentDate.getFullYear();
		
			const nextdate = currentYear + 1;
			const lastdate = currentYear - 1;
			// 前年时间段
			this.lastYeardate = lastdate + "-" + "01" + "-" + "1"
			// 明年时间段
			this.nextYeardate = nextdate + "-" + "12" + "-" + "31"

		},

		data() {
			return {
				page: 1,
				empty: "",
				recordlist: [],
				auth: {},
				showdate: false,
				
				// keyword:"",
			};
		},

		methods: {
			// 关键字
			selectparams(e) {
				 
				this.flag = ""

				this.recordlist = [];

				this.keyword = e
				uni.showLoading({
					title: '正在查询...'
				});
				this.Filter();
 
			},
			
			
		// 筛选日期
		selectdate(e) {
			this.showdate = true
		},
		// 日期筛选关闭
		closedate() {
			this.showdate = false
		},

			topback() {
				this.page = 1
				this.recordlist = []

				this.EmpTichengRecord()
			},

			// 筛选
			async Filter(item) {

				let data = {
					adminid: this.auth.id,
					keyword: this.keyword,
				}
				let result = await this.$u.api.admin.recharglist(data)
				
					if (result.data.length > 0) {

						this.empty = "notempty"

						this.recordlist = result.data 

						setTimeout(function() {
							uni.hideLoading();
						}, 1200);

					} else {
						
						setTimeout(function() {
							uni.hideLoading();
						}, 1200);
						this.empty = "isempty"
					}
			
			    },

			clearkeyword(e) {
				this.keyword = ""
				this.flag = ""
			},

			selectRecord(e) {
				this.recordlist = [];
				this.type = e.type;

				this.EmpTichengRecord();
			},
			async confirmdate(e) {
				
				// 筛选第一个跟最后一个日期
				this.date = `${e[0]} / ${e[e.length - 1]}`
			
				let data = {
					adminid: this.auth.id,
					date: this.date,
					keyword: this.keyword,
				}
				
				let result = await this.$u.api.admin.recharglist(data)
				 
					if (result.data.length > 0) {
						this.empty = "notempty"
									
						this.recordlist = result.data
			
						this.date = ""
						this.showdate = false

					} else {
						 
						this.recordlist =  []
						this.empty = "isempty"
						this.date = ""
			
						this.showdate = false
			
					}
			 
			
			},
			
			async EmpTichengRecord() {
				let data = {
					adminid: this.auth.id,
					type: this.type,
				};

				let result = await this.$u.api.admin.recharglist(data);
				 

				{
					if (result.data.length > 0) {
						this.recordlist = result.data;
					} else {
						this.empty = "isempty";
					}
				}
			},
			toinfo(rgeid) {

				this.$u.route("/pagesA/admin/recharginfo", {
					rgeid: rgeid

				})

			}
		},
		filters: {
			dateFormat: function(val) {// 格式化时间
				const dt = new Date(val*1000)
				const y = dt.getFullYear()
				const m = dt.getMonth() +1
				const d = dt.getDate()
				const hh = dt.getHours()
				const mm = dt.getMinutes()
				const ss = dt.getSeconds()
				 
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.content {
		position: relative;
	}

	.empty {
		position: absolute;
		left: 0;
		width: 100%;
		top: 250px;
	}

	.top-card {
		width: 90%;
		height: 450rpx;
		background-color: #fff;
		margin: 30rpx auto;
		border-radius: 30rpx;
		/* 设置统一的 border-radius 值 */
		border-bottom-left-radius: 0;
		/* 设置底部左侧边的圆角为 0 */
		border-bottom-right-radius: 0;

		/* 设置底部右侧边的圆角为 0 */
		.top {
			height: 150rpx;
			background-image: url("https://luxuries.h1668.com/uploads/20230801/bf08d7916a47a45590e75af305965bbf.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 30rpx;
			/* 设置统一的 border-radius 值 */
			border-bottom-left-radius: 0;
			/* 设置底部左侧边的圆角为 0 */
			border-bottom-right-radius: 0;
			/* 设置底部右侧边的圆角为 0 */
			display: flex;

			.top-left,
			.top-right {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #f8e3c3;
			}

			.top-left {
				font-size: 1.4rem;
				margin-left: 20rpx;
			}

			.top-right {
				font-size: 2rem;
				margin-left: 5rpx;
			}
		}

		.operate {
			height: 80rpx;
			display: flex;

			.operate-left,
			.operate-right {
				width: 25%;
				height: 80rpx;

				text-align: center;
			}
		}

		.content {
			display: flex;
			height: 200rpx;

			.content-left {
				width: 50%;
				height: 100%;

				.left-title {
					font-size: 1.25rem;
					margin-top: 50rpx;
					text-align: center;
				}

				.left-content {
					margin-top: 20rpx;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					color: black;

					.left {
						font-size: 1.25rem;
					}

					.right {
						font-size: 1.4rem;
					}
				}
			}

			.content-right {
				width: 50%;
				height: 100%;
				padding-top: 40px;
				padding-right: 15px;

				.right-title {
					font-size: 1.25rem;
					margin-top: 50rpx;
					text-align: center;
				}

				.right-content {
					margin-top: 20rpx;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					color: black;

					.left {
						font-size: 1.25rem;
					}

					.right {
						font-size: 1.4rem;
					}
				}
			}
		}
	}

	.search {
		width: 80%;
		position: fixed;
		top: 0%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 7%;
		z-index: 999;

	}

	.btngroup {
		width: 100%;
		display: flex;
		position: fixed;

		top: 40px;
		justify-content: space-around;
	}

	.datebtn {
		width: 60px;
	}


	.tabs {
		width: 90%;
		margin: 0 auto;
	}

	.data {
		width: 90%;
		height: 810px;
    margin: 90px auto;
    overflow-y: auto;
  
		border-bottom: 1px solid #eeeeee;
		background-color: #f5f6f7;

		.data-content:first-child {
			margin-top: 0;
		}

		.data-content {

			background-color: #fff;
			margin-top: 10rpx;
			padding: 10rpx;

			.title {
				text-align: left;
				color: black;
				font-size: 0.9rem;
			}

			.math {
				text-align: right;
				color: black;
				font-size: 0.8rem;
			}

			.time {
				text-align: left;
				font-size: 0.9rem;
			}

			.typeStyle {
				color: rgb(86, 86, 88);
				font-size: 15px;
			}
		}
	}
</style>